<template>
    <h2 style="text-align: center;">单元网格</h2>
    <!-- 面包屑 -->
     <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>
            <a href="/">网格化管理</a>
        </el-breadcrumb-item>
        <el-breadcrumb-item>单元网格</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 左右布局 -->
    <div class="common-layout">
        <el-container>
            <!-- 树形部分 -->
            <el-aside width="200px" style="border: 1px solid #ccc; margin: 20px 3px; padding: 15px;">
                <el-input
                    v-model="filterText"
                    class="w-60 mb-2"
                    placeholder="Filter keyword"
                />

                <el-tree
                    ref="treeRef"
                    style="max-width: 600px"
                    class="filter-tree"
                    :data="AreaInfo"
                    :props="defaultProps"
                    default-expand-all
                    :filter-node-method="filterNode"
                />
            </el-aside>
            <!-- 表单查询数据显示部分 -->
            <el-main>
                <!-- 表单查询部分 -->
                <div style="border: 1px solid #ccc; margin: 1px 3px;padding: 15px;">
                    <el-form :inline="true" :model="formInline" class="demo-form-inline">
                        <el-form-item label="网格名称">
                            <el-input v-model="formInline.UnitGrid_Name" placeholder="请输入网格名称" clearable />
                        </el-form-item>

                        <el-form-item>
                            <el-button type="primary" @click="GetUnitGrid">查询</el-button>
                            <el-button type="danger" @click="Reset">重置</el-button>
                        </el-form-item>
                    </el-form>
                </div>

                <!-- 数据显示部分 -->
                <div style="border: 1px solid #ccc; margin: 20px 3px;padding: 15px;">
                    <el-button  type="success" @click="AddUnitGrid" >新增+</el-button>
                    <el-table :data="Info" style="width: 100%">
                        <el-table-column fixed type="index" label="序号" width="90" />
                        <el-table-column prop="Id" label="编号" width="180" />
                        <el-table-column prop="UnitGrid_Name" label="网格名称" width="200" />
                        <el-table-column prop="UnitGrid_Code" label="网格编码" width="200" />
                        <el-table-column prop="UnitGrid_Rank" label="网格层级" width="150" />
                        <el-table-column prop="Area_Name" label="所属区域" width="150" />
                        <el-table-column fixed="right" label="操作" min-width="180">
                        <template #default="setup">
                            <el-button  type="danger" size="small" @click="DelUnitGrid(setup.row.Id)">删除</el-button>
                            <el-button  type="primary" size="small" @click="UpdateUnitGrid(setup.row)">编辑</el-button>
                        </template>
                        </el-table-column>
                    </el-table>
                </div>

                <!-- 分页部分 -->
                <table>
                    <tr>
                        <td>
                            <div class="demo-pagination-block">
                                <el-pagination
                                v-model:current-page="PageInfo.index"
                                v-model:page-size="PageInfo.size"
                                :page-sizes="[3,4,5,6]"
                                :size="PageInfo.size"
                                :disabled="disabled"
                                :background="background"
                                layout="sizes, slot,"
                                :total="PageInfo.zongtiao"
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange">
                                数据共<span style="color: red;">{{ PageInfo.zongtiao }}</span>条，
                                每页<span style="color: red;">{{ PageInfo.size }}</span>条，
                                共<span style="color: red;">{{ PageInfo.index }}</span>/
                                <span style="color: red;">{{ PageInfo.zongpage }}</span>页
                                </el-pagination>
                            </div>
                        </td>
                        <td>
                            <div class="demo-pagination-block">
                                <el-pagination
                                v-model:current-page="PageInfo.index"
                                v-model:page-size="PageInfo.size"
                                :page-sizes="[3,4,5,6]"
                                :size="PageInfo.size"
                                :disabled="disabled"
                                :background="background"
                                layout="slot,prev, pager, next"
                                :total="PageInfo.zongtiao"
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                prev-text="上一页"
                                next-text="下一页"
                                >
                                    <el-button  type="primary" size="small" link @click="handleCurrentChange(1)">首页</el-button>
                                </el-pagination>
                            </div>
                        </td>
                        <td>
                            <div class="demo-pagination-block">
                                <el-pagination
                                v-model:current-page="PageInfo.index"
                                v-model:page-size="PageInfo.size"
                                :page-sizes="[3,4,5,6]"
                                :size="PageInfo.size"
                                :disabled="disabled"
                                :background="background"
                                layout="slot, jumper"
                                :total="PageInfo.zongtiao"
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                prev-text="上一页"
                                next-text="下一页"
                                >
                                    <el-button  type="primary" size="small" link @click="handleCurrentChange(PageInfo.zongpage)">尾页</el-button>
                                </el-pagination>
                            </div>
                        </td>
                    </tr>
                </table>

                <!-- 添加弹出窗 -->
                <el-dialog
                    v-model="AdddialogVisible"
                    title="添加单元网格"
                    width="500"
                >
                    <el-form
                        ref="ruleFormRef"
                        style="max-width: 600px"
                        :model="AddInfo"
                        :rules="rules"
                        label-width="auto"
                        class="demo-ruleForm"
                        :size="formSize"
                        status-icon
                    >
                        <el-form-item label="网格名称" prop="DutyGrid_Name">
                            <el-input v-model="AddInfo.UnitGrid_Name" />
                        </el-form-item>

                        <el-form-item label="网格编码" prop="DutyGrid_Code">
                            <el-input v-model="AddInfo.UnitGrid_Code" />    
                        </el-form-item>

                        <el-form-item label="所属区域" prop="name">
                            <el-cascader v-model="AddInfo.Area_Id" :options="AddAreaInfo" :props="props1" @change="AreaChange" clearable />
                        </el-form-item>

                        <el-form-item label="网格层级" prop="name">
                            <el-input v-model="AddInfo.UnitGrid_Rank"  disabled/>
                        </el-form-item>                    

                        <el-form-item>
                            <el-button type="primary" @click="submitForm(ruleFormRef)">添加</el-button>
                            <el-button @click="resetForm(ruleFormRef)">重置</el-button>
                        </el-form-item>
                    </el-form>
                </el-dialog>

                 <!-- 修改弹出窗 -->
                 <el-dialog
                    v-model="UpdatedialogVisible"
                    title="修改单元网格"
                    width="500"
                >
                    <el-form
                        ref="ruleFormRef"
                        style="max-width: 600px"
                        :model="AddInfo"
                        :rules="rules"
                        label-width="auto"
                        class="demo-ruleForm"
                        :size="formSize"
                        status-icon
                    >
                        <el-form-item label="网格名称" prop="DutyGrid_Name">
                            <el-input v-model="AddInfo.UnitGrid_Name" />
                        </el-form-item>

                        <el-form-item label="网格编码" prop="DutyGrid_Code">
                            <el-input v-model="AddInfo.UnitGrid_Code" />    
                        </el-form-item>

                        <el-form-item label="所属区域" prop="name">
                            <el-cascader v-model="AddInfo.Area_Id" :options="AddAreaInfo" :props="props1" @change="AreaChange" clearable />
                        </el-form-item>

                        <el-form-item label="网格层级" prop="name">
                            <el-input v-model="AddInfo.UnitGrid_Rank"  disabled/>
                        </el-form-item>                    

                        <el-form-item>
                            <el-button type="primary" @click="UpdatessubmitForm(ruleFormRef)">修改</el-button>
                            <el-button @click="resetForm(ruleFormRef)">重置</el-button>
                        </el-form-item>
                    </el-form>
                </el-dialog>


            </el-main>
        </el-container>
    </div>

    

</template>

<script lang="ts" setup>
    import { ref, watch,onMounted } from 'vue'
    import type { TreeInstance } from 'element-plus'
    import axios from 'axios';
    import { reactive } from 'vue'
    import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
    import { ElMessage, ElMessageBox } from 'element-plus'



    //显示响应式数据
    const Info=ref([]);
    //分页响应式数据
    const PageInfo=ref({
        index:1,
        size:3,
        zongtiao:0,
        zongpage:0,
    })
    const background = ref(true)
    const disabled = ref(false)

    //修改页容量
    const handleSizeChange = (val: number) => {
        PageInfo.value.size=val;
        GetUnitGrid();
    }
    //跳转页
    const handleCurrentChange = (val: number) => {
        PageInfo.value.index=val;
        GetUnitGrid();
    }
        //钩子函数
    onMounted(()=>{
        GetUnitGrid();//显示
        GetAreaTree();//加载区域数据
    })
    //查询条件
    const formInline = reactive({
        UnitGrid_Name: '',
    })
    //显示
    const GetUnitGrid = () => {
        axios.get("http://localhost:5247/api/Unit/GetUnitGrid",
            {
                params:{
                    UnitGrid_Name:formInline.UnitGrid_Name,
                    index:PageInfo.value.index,
                    size:PageInfo.value.size,
                }
            }
        )
        .then(res=>{
            Info.value=res.data.Plsit;
            PageInfo.value.zongpage=res.data.ZongPage;
            PageInfo.value.zongtiao=res.data.ZongTiao;
        })
    }
    //重置
    const Reset=()=>{
        formInline.UnitGrid_Name="";
    }

    //逻辑删除
    const DelUnitGrid = (Id:string) => {
        ElMessageBox.confirm(
            '确定删除?',
            '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            axios.put("http://localhost:5180/api/Unit/DelUnitGrid",
                {
                    Id:Id
                }
            )
            .then(res=>{
                if(res.data.Code==200)
                {
                    ElMessage.success(res.data.Message);
                    GetUnitGrid();
                }
                else
                {
                    ElMessage.error(res.data.Message);
                }
            })
        })
    }

    //--------------------------------------------------------级联树形---------------------------------------------------//
    //区域响应式数据
    const AreaInfo=ref([])

    //加载区域数据
    const GetAreaTree=()=>{
        axios.get("http://localhost:5247/api/Area/GetAreaTree")
        .then(res=>{
            AreaInfo.value=res.data.Data;//树形
            AreaInfo1.value=res.data.Data;//级联
            AddAreaInfo.value=res.data.Data;//添加
        })
    }
    interface Tree {
        [key: string]: any
    }

    const filterText = ref('')
    const treeRef = ref<TreeInstance>()
    //树形获取值
    const defaultProps = {
        children: 'Children',
        id:"Id",
        label: 'Area_Name',
    }

    watch(filterText, (val) => {
        treeRef.value!.filter(val)
    })

    const filterNode = (value: string, data: Tree) => {
        if (!value) return true
        return data.Area_Name.includes(value)
    }

    //级联
    const props1 = {
        checkStrictly: true,
        value:"Id",
        label:"Area_Name",
        children:"Children"
    }
    const AreaInfo1=ref([]);
    const AddAreaInfo=ref([])
    const AreaChange=(value:any)=>{
        AddInfo.value.Area_Id=value[value.length-1];
    }
    //-------------------------------------------------------------------添加弹出窗--------------------------------------------------------------------//

    const AdddialogVisible=ref(false);
    //添加按钮
    const AddUnitGrid=()=>{
        AdddialogVisible.value=true;

        //清除数据
        AddInfo.value.Area_Id=-1;
        AddInfo.value.UnitGrid_Name="";
        AddInfo.value.UnitGrid_Code="";
    }


    const formSize = ref<ComponentSize>('default')
    const ruleFormRef = ref<FormInstance>()
    //添加响应式数据
    const AddInfo = ref({
        Id:"",
        UnitGrid_Name: "",
        UnitGrid_Code: "",
        UnitGrid_Rank: "四级网格",
        Area_Id: -1
    })

    const locationOptions = ['Home', 'Company', 'School']

    //验证
    const rules = reactive<FormRules>({
        UnitGrid_Name: [
            { required: true, message: '请输入网格名称', trigger: 'blur' },
        ],
        UnitGrid_Code: [
            { required: true, message: '请输入网格编码', trigger: 'blur' },
        ],
    })

    //添加按钮
    const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            axios.post("http://localhost:5180/api/Unit/AddUnitGrid",AddInfo.value)
            .then(res=>{
                if(res.data.Code==200)
                {
                    ElMessage.success(res.data.Message);

                    //关闭弹窗
                    AdddialogVisible.value=false;

                    GetUnitGrid();//跳转到显示页面
                }
                else
                {
                    ElMessage.error(res.data.Message);
                }
            })
        } else {
        console.log('error submit!', fields)
        }
    })
    }

    const resetForm = (formEl: FormInstance | undefined) => {
        if (!formEl) return
        formEl.resetFields()
    }
    //-------------------------------------------------------------------修改弹出窗---------------------------------------------------------------------//


    const UpdatedialogVisible=ref(false);

    //修改点击按钮
    const UpdateUnitGrid=(row:any)=>{
        UpdatedialogVisible.value=true;

        //反填数据
        AddInfo.value.Id=row.Id;
        AddInfo.value.Area_Id=row.Area_Id;
        AddInfo.value.UnitGrid_Name=row.UnitGrid_Name;
        AddInfo.value.UnitGrid_Code=row.UnitGrid_Code;
    }

    //修改按钮
    const UpdatessubmitForm = async (formEl: FormInstance | undefined) => {
        if (!formEl) return
        await formEl.validate((valid, fields) => {
            if (valid) {
                axios.put("http://localhost:5180/api/Unit/UpdateUnitGrid",AddInfo.value)
                .then(res=>{
                    if(res.data.Code==200)
                    {
                        ElMessage.success(res.data.Message);

                        //关闭弹窗
                        UpdatedialogVisible.value=false;

                        GetUnitGrid();//跳转到显示页面
                    }
                    else
                    {
                        ElMessage.error(res.data.Message);
                    }
                })
            } else {
            console.log('error submit!', fields)
            }
        })
    }
</script>




<style>
    .demo-pagination-block + .demo-pagination-block {
        margin-top: 10px;
    }
    .demo-pagination-block .demonstration {
        margin-bottom: 16px;
    }
    .demo-form-inline .el-input {
    --el-input-width: 220px;
    }

    .demo-form-inline .el-select {
    --el-select-width: 220px;
    }
</style>